{% extends "promos/base.html" %}
{% load i18n %}

{% block extra_head %}
    {{ block.super }}
    {{ form.media }}
{% endblock %}

{% block head_title %}Geotag Promo{% endblock %}


{% block main_content %}
<h1>{{ promo.headline }}</h1>
<div class="edit-promo-tabs">
    <div class="tab-links">
        <a href="{% url promos_promo_edit promo_id=promo.id %}" rel="promo-info">Pitch</a>
        <a href="#" rel="promo-info" title="Geotag" class="active">Geotag</a>
        <a href="{% url promos_promo_image_list promo_id=promo.id %}">Images</a>
        <a href="{% url promos_promo_link_list promo_id=promo.id %}">Related Links</a>
        <a href="{% url promos_promo_date_list promo_id=promo.id %}">Suggested Dates</a>
        <a href="{% url promos_promo_billboard_list promo_id=promo.id %}">Billboards</a>
        <a href="{% url promos_promo_detail promo_id=promo.id %}">Detail</a>
        <br class="clearboth" />
    </div>
    <div class="tab-contents">
        <form onSubmit="return false;">
            <input type="text" size="75"  maxlength="75" id="id_address" />
            <a href="#" >{% trans "Center the map" %}</a>
        </form>
        <br /><br />

        <form action="." method="post" enctype="multipart/form-data" >
            <fieldset>
            <table>
            {{ form }}
            </table>
            <input id="id_submit" type="submit" value="Submit" />
            <a href="../">Cancel</a>
            </fieldset>
        </form>
    </div>
</div>

<script type="text/javascript">
    jQuery(document).ready(function() {
        var geodjango_func = eval('geodjango_' + jQuery('span[id$=_admin_map]').attr('id').split('_')[1]);
        geodjango_func.map.zoomOut();
        function move_to_geocode(){
            address = jQuery("#id_address")[0].value;
            gkey = "{{ google_key }}";
            google_geocoder_query = "http://maps.google.com/maps/geo?q="+address+"&output=json&oe=utf8&sensor=false&key=" + gkey + "&callback=?";
            jQuery.getJSON(google_geocoder_query,
                           function(data){
                            lon = data["Placemark"][0]["Point"]["coordinates"][0];
                            lat = data["Placemark"][0]["Point"]["coordinates"][1];
                            zoom_lvl = 15;
                            //console.log(" lon : " + lon +"lat : "+ lat);
                            geocoder_projection = new OpenLayers.Projection("EPSG:4326")
                            lonlat = new OpenLayers.LonLat(lon, lat);
                            lonlat.transform(geocoder_projection,geodjango_func.map.getProjectionObject());
    
                            if (geodjango_func.is_point) {
                                $("#id_point").text("POINT (" + lonlat.lon + ' ' + lonlat.lat + ")");
                                var wkt = "POINT (" + lonlat.lon + ' ' + lonlat.lat + ")";
                                var admin_geom = geodjango_func.read_wkt(wkt);
                                geodjango_func.layers.vector.addFeatures([admin_geom]);
                            }
                            geodjango_func.map.setCenter(lonlat, zoom_lvl);
                           })
        };
        jQuery('#id_address').parent().find('a').click(move_to_geocode);
        if ("{{ geotag }}" == "None") {
            zoom_lvl = 4;
            lonlat = new OpenLayers.LonLat(-11065635.709248047, 4813698.292617189);
            geodjango_func.map.setCenter(lonlat, zoom_lvl);
        };
    });

</script>
{% endblock %}

{% block subnav %}
<h2>{% trans "Links" %}</h2>
<ul class="action-links">
    <li><a href="{% url promos_promo_list %}">promo list</a></li>
    <li><a href='{% url promos_promo_billboard_calendar_now promo_id=promo.id %}'>Calendar</a></li>
</ul>
{% endblock %}
